<template>
  <div class="index">
    <NavHeader></NavHeader>
    <Toolbar :btntype="btntype"></Toolbar>
    <Asliderbar></Asliderbar>
    <RightMenu :btntype="btntype"></RightMenu>
    <MapLegend></MapLegend>
    <MainPopup></MainPopup>
    <!-- <WarningPopup /> -->
    <div class="data-content">
      <DateTime></DateTime>
    </div>
    <div class="weather-content">
      <div
        class="weather-icon"
        :style="{ backgroundImage: `url(${currentWearher.imgUrl})` }"
      ></div>
      <div class="weather-dowm">
        <div class="weather-text">{{ currentWearher.text }}</div>
        <div class="weather-text">{{ currentWearher.temp }}°C</div>
      </div>
    </div>
    <MapNav />

    <div id="info_box">
      <InfoWindows></InfoWindows>
      <!-- {{ infodata }} -->
    </div>
    <div class="index_box">
      <!-- <button v-if="maptype==3" @click="changess('/cesium2d',2)">san</button> -->
      <!-- <button v-if="maptype==2" @click="changess('/cesium3d',3)">er</button> -->
      <img
        v-if="tokenStr == '/cesium3d'"
        src="@/assets/control/QieHuan-3.png"
        @click="changess('/cesium2d', 2)"
        alt
      />
      <img
        v-if="tokenStr == '/cesium2d'"
        src="@/assets/control/QieHuan-2.png"
        @click="changess('/cesium3d', 3)"
        alt
      />
    </div>
    <ToolbarPopup></ToolbarPopup>
    <div class="dialog_box">
      <el-dialog
        :visible.sync="dialogVisible"
        width="20%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :modal="false"
      >
        <div class="table_body">
          <div class="table_h">
            <div class="tit">预警信息</div>
            <div class="close" @click="handleClose">X</div>
          </div>
          <div class="tableitem" v-for="(item, i) in tableData" :key="i">
            <div class="img_item">
              <img src="../../assets/panelTree/locate.png" alt="" />
            </div>
            <div>
              <ul>
                <li>
                  <span class="text1">测站名称:</span>
                  <span class="text2"> {{ item.addressName }}</span>
                </li>

                <li>
                  <span class="text1">预警级别:</span>

                  <span class="text2 text3"> {{ item.level }}级</span>
                </li>
                <!-- <li><span>类型 </span>{{ item.type }}</li> -->
                <li>
                  <span class="text1">预警内容:</span>

                  <span class="text2"> {{ item.content }}</span>
                </li>

                <li>
                  <span class="text1">预警时间:</span>

                  <span class="text2"> {{ item.alarmTime }}</span>
                </li>
              </ul>
            </div>
            <div>
              <!-- <button class="btns" @click="chooseYujing(item.id)">去处理</button> -->
              <div class="btns" @click="chooseYujing(item.id)">去处理</div>
            </div>
            <!-- <div> -->
            <!-- <button class="btns" @click="chooseYujing(item.id)">去处理</button> -->
            <!-- <button @click="aplayAudio">xxxxxx</button> -->
            <!-- <button @click="acloseAudio">xxxxxx</button> -->
            <!-- </div> -->
          </div>
        </div>
        <el-dialog width="20%" :visible.sync="innerVisible" append-to-body>
          <div class="innerItem">
            <div class="top">请您确认，是否处理该预警？</div>
            <div class="down">
              <div class="btns" @click="closeinnerVisible">取 消</div>
              <div class="btns" @click="sendYujing">确 认</div>
            </div>
          </div>
        </el-dialog>
      </el-dialog>
    </div>
    <audio id="audio" loop src="../../../public/warn1.wav" />
    <div class="index_warpper">
      <router-view />
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
import Toolbar from "@/views/mapcomponents/Toolbar";
import ToolbarPopup from "@/views/mapcomponents/ToolbarPopup";
import Asliderbar from "@/views/mapcomponents/Asliderbar";
import RightMenu from "@/views/mapcomponents/RightMenu";
import MapLegend from "@/views/mapcomponents/MapLegend";
import MainPopup from "@/components/MainPopup";
import InfoWindows from "@/views/mapcomponents/InfoWindows";
import WarningPopup from "@/components/WarningPopup.vue";
import NavHeader from "@/views/mapcomponents/NavHeader.vue";
import DateTime from "@/views/mapcomponents/DateTime.vue";
import MapNav from "@/views/mapcomponents/MapNav.vue";

import { getWeatherInfo } from "@/api/http";
import { getToken, getBurstLevelOne, receiveOrderByUser } from "@/api/apiPOI";

import { Local } from "@/until/storage";
import {
  getpolyLineData,
  getpolyPointData,
  getpolyxzqhData,
  getBoxPointData,
  getBoxLineData,
  getYXQYidData,
} from "@/api/http";

export default {
  data() {
    return {
      infodata: null,
      dialogVisible: false,
      innerVisible: false,
      selectId: null,
      tableData: [],
      timer: null, //加载数据定时器
      timer1: null, //加载预警定时器

      tokenStr: "/cesium2d",
      btntype: 2,
      currentWearher: {
        weather_type: 0,
        text: "多云",
        temp: 12,
        imgUrl: require("../../assets/weather/qing.png"),
      },
    };
  },
  components: {
    Toolbar,
    ToolbarPopup,
    Asliderbar,
    RightMenu,
    MapLegend,
    MainPopup,
    InfoWindows,
    WarningPopup,
    NavHeader,
    DateTime,
    MapNav,
  },
  computed: {
    // btntype() {
    //   return this.$store.getters.btntype;
    // },
  },
  beforeCreate() {},
  created() {
    this.updateWeather();
    this.loadToken();
    this.getTokenByTimer();
    this.emit();
    // this.getData(this.emit);
    // this.getAddTalkLike(this.getTalkBy);
  },
  mounted() {
    // this.getYujingData();
    this.$nextTick(() => {
      this.timer1 = setInterval(() => {
        this.getYujingData();
      }, 1000 * 60);
    });

    // setInterval(() => {
    // console.log('22')
    // }, 1000*60*5);
    // console.log("index");
    Bus.$on("ViewType", (e) => {
      // console.log(e);
      // this.viewtype(e);
    });
    // Bus.$on("infodata", (e) => {
    //   // console.log(e);

    //   // console.log(typeof e);

    //   if (typeof e == "string") {
    //     this.infodata = e;
    //   }
    //   // this.viewtype(e);
    // });
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    // 更新天气信息
    updateWeather() {
      // 定义图片类型映射关系
      const weatherDatas = [
        {
          code: "xue",
          name: "雪",
        },
        {
          code: "lei",
          name: "雷阵雨",
        },
        {
          code: "shachen",
          name: "沙尘暴",
        },
        {
          code: "wu",
          name: "雾",
        },
        {
          code: "bingbao",
          name: "冰雹",
        },
        {
          code: "yun",
          name: "多云",
        },
        {
          code: "yu",
          name: "雨",
        },
        {
          code: "yin",
          name: "阴",
        },
        {
          code: "qing",
          name: "晴",
        },
      ];
      getWeatherInfo().then((res) => {
        if (res?.result?.now) {
          const { text, temp } = res.result.now;
          this.currentWearher.text = text;
          this.currentWearher.temp = temp;
          this.currentWearher.weather_type =
            weatherDatas.find((val) => val.name == text)?.code || "qing";
          this.currentWearher.imgUrl = require(`../../assets/weather/${this.currentWearher.weather_type}.png`);
        }
      });
    },
    // /新增接口
    getAddTalkLike(callback) {
      // console.log("新增");
      callback();
    },
    handleClose() {
      this.dialogVisible = false;
      this.acloseAudio();
    },
    async getYujingData() {
      let acc = window.sessionStorage.getItem("account");
      // let acc = "iBxT8OW3Tjqes8yuvqyCbg==";

      const { data: res } = await getBurstLevelOne({
        account: acc,
      });
      // console.log(res, "res测试");
      if (!res) {
        return 0;
      }
      this.tableData = [];
      res.forEach((element) => {
        if (element.state == 1) {
          this.tableData.push(element);
        }
      });
      // this.tableData = res;
      if (this.tableData.length > 0) {
        this.dialogVisible = true;
        this.aplayAudio();
      } else {
        this.dialogVisible = false;
        this.acloseAudio();
      }
    },
    closeinnerVisible() {
      this.innerVisible = false;
    },
    chooseYujing(data) {
      this.selectId = data;
      this.innerVisible = true;
    },
    async sendYujing() {
      let acc = window.sessionStorage.getItem("account");
      const res = await receiveOrderByUser({
        account: acc,
        id: this.selectId,
      });
      this.acloseAudio();
      this.timer1 = setInterval(() => {
        this.getYujingData();
      }, 1000 * 60);
      this.innerVisible = false;
      this.dialogVisible = false;
    },
    aplayAudio() {
      const audio = document.getElementById("audio");
      audio.autoplay = true;
      audio.play();
      clearInterval(this.timer1);
    },
    acloseAudio() {
      const audio = document.getElementById("audio");
      audio.pause();
      clearInterval(this.timer1);
      // this.timer1 = setInterval(() => {
      //   this.getYujingData();
      // }, 1000 * 60);
      // audio.resume()
    },
    //列表接口
    getTalkBy() {
      // console.log("列表");
    },

    emit() {
      let tokenStr = window.sessionStorage.getItem("path");
      if (tokenStr) {
        this.tokenStr = tokenStr;
      }
      let btntype = window.sessionStorage.getItem("btntype");
      if (btntype) {
        this.btntype = btntype;
      }
      // this.$router.push(this.tokenStr);
    },

    changess(path, type) {
      this.$router.push({ path: path });
      // this.$store.commit("changeBtntype", type);
      window.sessionStorage.setItem("path", path);
      this.tokenStr = path;
      window.sessionStorage.setItem("btntype", type);
      this.btntype = Number(type);
      Bus.$emit("dosetmethodes", true);
      Bus.$emit("btntype", this.btntype);
    },

    async loadToken() {
      getToken({
        account: "69h3M+Cdd+3+5bz3Wp4Bhw==",
        password: "Kz+afo7Nvvly/reb41bk6g==",
      }).then((res) => {
        console.log(res, "获取token数据");
        let paramType = (value, type) =>
          Object.prototype.toString.call(value).includes(type);
        if (paramType(res, "Object")) {
          Local.set("token", res.result.token);
          // window.sessionStorage.setItem("token", res.result.token);
          this.$store.commit("changetoken", res.result.token);
          // localStorage.setItem();
        }
      });
    },

    getTokenByTimer() {
      let this_ = this;
      if (this.timer !== null) {
        clearInterval(this.timer);
      } else {
        this.timer = setInterval(() => {
          this_.loadToken();
        }, 1000 * 60 * 25);
      }
    },
  },
};
</script>

<style scoped>
.index {
  width: 100%;
  height: 100%;
  position: fixed;
}
.index_box {
  position: absolute;
  right: 30px;
  bottom: 186px;
  z-index: 999;
  width: 41px;
  height: 41px;
  /* background-color: red; */
}
.index_warpper {
  width: 100%;
  height: 100%;
}
.toolbar {
  z-index: 999;
}
.toolbarpopup {
  z-index: 999;
  /* background: red; */
}
#info_box {
  position: absolute;
  z-index: 999;
  top: 140px;
  left: 20px;
}
.data-content {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 998;
}

.weather-content {
  position: absolute;
  top: 0px;
  right: 20px;
  width: auto;
  /* background-color: red; */
  /* display: flex; */
  /* flex-direction: row; */
  /* justify-content: space-between; */
  /* align-items: center; */
  z-index: 998;
}
.weather-icon {
  /* width: 34px;
    height: 26px; */
  width: 26px;
  height: 26px;
  padding: 0 2px;
  margin-right: 20px;
  margin-top: 10px;
  background-size: 100%;
  background-repeat: no-repeat;
}
.weather-dowm {
  display: flex;
  flex-wrap: nowrap;
}
.weather-dowm > div:nth-child(1) {
  margin: 0 10px 0 -20px;
}
.weather-text {
  line-height: 16px;
  /* font-family: SourceHanSansCN-Regular; */
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  color: #b08721;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.dialog_box /deep/ .el-dialog {
  background: none;
}
.dialog_box /deep/ .el-dialog__header {
  display: none;
}
.dialog_box /deep/ .el-dialog__body {
  /* background: rgba(254, 240, 240, 1); */
  /* color: rgba(245, 108, 108, 1); */
  padding: 0;
  width: 400px;
}
.table_body {
  /* background-image: url("../../assets/navHeader/gaojing.png"); */
  background-color: #fef0f0;
  background-repeat: no-repeat;
  border: 1px solid #fde2e2;
  width: 400px;
  padding: 10px 0;
}
.table_h {
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tit {
  font-size: 16px;
  margin-left: 50px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    #f5d16c 0%,
    #f56c6c 45%,
    #f56c6c 100%
  );
  font-weight: 700;
}
.close {
  margin-top: 5px;
  margin-right: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #f56c6c;
  cursor: pointer;
}
.tableitem {
  height: 110px;
  display: flex;
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px solid #f56c6c;
  margin: 5px 10px;
  border-radius: 5px;
}
.tableitem > div > ul li {
  height: 20px;
  line-height: 20px;
}
/* .tableitem > div > ul li span {
  display: inline-block;
  width: 55px;
} */
.img_item {
  width: 15px;
  height: 16px;
  margin: 0 20px;
}

.text1 {
  color: #f56c6c;
  font-weight: 500;
}
.text2 {
  color: #f56c6c;
  font-weight: 500;
}
.text3 {
  color: #e7081b;
}
.btns {
  width: 60px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid #f56c6c;
  text-align: center;
  /* margin-left: 180px; */
  /* margin-top: 10px; */
  cursor: pointer;
  font-family: SourceHanSansCN-Regular;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #f56c6c;
}
.el-dialog__wrapper /deep/ .el-dialog__body {
  background-color: #fef0f0;
  /* background-image: url("../../assets/poipopup/poi-popup-bg-583-243.png"); */
  /* background-size: cover; */
  width: 400px;
  padding: 0;
  /* height: 100px; */
  box-sizing: border-box;
}

.el-dialog__wrapper /deep/ .el-dialog__header {
  /* background-color: #1b3650; */
  padding: 0;
}
.innerItem {
  color: #f56c6c;
  height: 50px;
  /* line-height: 20px; */
  padding: 20px;
  font-size: 16px;
  height: 100px;
}
.down {
  margin-top: 40px;
  display: flex;
  justify-content: space-evenly;
}
.btns:hover {
}
</style>
